<template>
  <div class="car">
    <!-- <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    /> -->

    <!-- 这里是购物车的详细数据 -->

    <!-- 查看购物车-->
    <shoplistcar></shoplistcar>
    <!-- <ower></ower> -->
    <!-- 这里是购物车的详细数据 -->
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
      可能还想要
    </van-divider>

    <!-- 获取推荐产品数据 -->
    <van-grid :column-num="2">
      <van-grid-item v-for="list in mainStores.list" :key="list.img1">
        <!-- <template #image> -->
        <van-image width="100" height="100" :src="list.img1" />
        <div>
          <div class="van-multi-ellipsis--l2">
            {{ list.proname }}
          </div>
        </div>
        <p class="price">￥{{ list.originprice }}</p>
        <!-- </template> -->
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup>
import shoplistcar from "../components/shoplistcar.vue";
import { getRecommendList, getCarList } from "@/services/index";
import { useStores } from '@/stores/stores'
import { ref, onMounted } from "vue";
const mainStores = useStores()
const lists = ref([]);

mainStores.hancommendlist(1, 2)
// 这个地方是可以传值的，所以从本质来说，写在哪并什么什么区别
</script>
<style scoped>
.van-multi-ellipsis--l2 {
  font-size: 12px;
  margin-top: 5px;
}

.price {
  font-size: 16px;
  color: red;
  /* margin-top: 5px; */
}
</style>
